<template>
    <view class="gy-bottom-action" id="gy-bottom-action" :style="{backgroundColor: props.bgColor || '', paddingBottom: system.isIos() ? '68rpx' : '', bottom: props.bottom}">
        <slot></slot>
        <view class="gy-bottom-action-extend" :style="{backgroundColor: props.bgColor || ''}">
            <slot name="extend"></slot>
        </view>
    </view>
</template>

<script lang="ts" setup>
	
	import {
		onMounted,
		getCurrentInstance
	} from "vue";
	
	import system from "@/utils/system/index.js";
	
	const { proxy } = getCurrentInstance();
	
	const emits = defineEmits(["height"]);
	
    const props = defineProps({
        bgColor: {
        	type: String
        },
		bottom: {
        	type: String,
			default: "0px"
        }
    });
	
	onMounted(() => {
		// #ifdef MP-WEIXIN
		proxy.createSelectorQuery().select("#gy-bottom-action").boundingClientRect((res: any)=>{
			emits("height", res.height);
		}).exec();
		// #endif
	});

</script>

<style lang="scss" scoped>
	.gy-bottom-action{
	    position: fixed;
	    bottom: 0;
	    left: 0;
	    z-index: 10;
	    width: 100%;
	    padding: var(--gy-gap);
	    box-shadow: 0px 2px 10px rgba(16,16,16,0.1);
		// transition: 0.1s;
	    .gy-bottom-action-extend{
	        position: absolute;
	        left: 0;
	        bottom: 100%;
	        width: 100%;
	        background-color: #fff;
	    }
	}
	
</style>